<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>应届大学生战力榜</title>
		<!--vue-->
		<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
		<!--axios-->
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<!--element-->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
		<style>
			.el-form-item {
				margin-bottom: 0px;
			}
		</style>
	</head>
	<body>
		<!-- 页面渲染 -->
		<div id="app">
			<!-- 数据展示区 -->

			<div align="left">
				<el-button type="primary" >保存变更</el-button>
				<el-button type="primary" @click="setDefaultDamageBonus" >增伤加成初始化</el-button>
				<el-button type="primary"> <a href="group.html" style="color: white;text-decoration:none"  >一键分组</a></el-button>
				<el-button type="primary"> <a href="group2.html" style="color: white;text-decoration:none"  >戴萨德增伤后分组</a></el-button>

				<template>
					<div align="left" style="margin-top: 10px;">
						<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
							<el-tab-pane label="法师" name="法师"></el-tab-pane>
							<el-tab-pane label="野蛮人" name="野蛮人"></el-tab-pane>
							<el-tab-pane label="猎魔" name="猎魔"></el-tab-pane>
							<el-tab-pane label="圣教军" name="圣教军"></el-tab-pane>
							<el-tab-pane label="武僧" name="武僧"></el-tab-pane>
							<el-tab-pane label="死灵" name="死灵"></el-tab-pane>

							<el-tab-pane   name="请假人员" >
								<span slot="label" style="color: red">请假人员</span>
							</el-tab-pane>
							<el-tab-pane name="失联人员"   >
								<span slot="label" style="color: red">失联人员</span>
							</el-tab-pane>
						</el-tabs>
						<el-table :data="groupUserList" style="width: 100%;"  :row-style="{height:'30px'}" :cell-style="{padding: '0'}">

							<el-table-column prop="index" label="序号" width="60"  header-align="center">
								<template slot-scope="scope">

									<span v-text="scope.$index + 1"> </span>

								</template>
							</el-table-column>
							<el-table-column prop="nickName" label="角色名" width="180"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-input v-model="row.nickName" size="small" @input="saveUpdate(row)"/>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="jobName" label="职业" width="120"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-select v-model="row.jobName" placeholder="请选择"  @change="saveUpdate(row)">
												<el-option
														v-for="item in jobList"
														:key="item"
														:label="item"
														:value="item">
												</el-option>
											</el-select>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="peakLevel" label="巅峰等级" width="120"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-input v-model="row.peakLevel" type="number" size="small"  @input="saveUpdate(row)"/>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="dps" label="面板伤害" width="120"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-input v-model="row.dps"  size="small"  type="number"  @input="saveUpdate(row)"/>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="damageBonus" label="戴萨德增伤加成" width="180"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-input v-model="row.damageBonus"  size="small"  type="number"  @input="saveUpdate(row)"/>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="damageBonus" label="绩效分" width="180"  header-align="center">
							<template slot-scope="{row}">
								<el-form>
									<el-form-item>
										<el-input v-model="row.performanceScore"  size="small"  type="number"  @input="saveUpdate(row)"/>
									</el-form-item>
								</el-form>
							</template>
						</el-table-column>
							<el-table-column prop="status" label="状态" width="100"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-select v-model="row.status" placeholder="请选择"  @change="saveUpdate(row)">
												<el-option
														v-for="item in ['正常','请假','失联']"
														:key="item"
														:label="item"
														:value="item">
												</el-option>
											</el-select>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="remark" label="备注" width="180"  header-align="center">
								<template slot-scope="{row}">
									<el-form>
										<el-form-item>
											<el-input v-model="row.remark"  size="small" maxlength="200"  @input="saveUpdate(row)"/>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
			</div>
		</div>

		<script>
			axios.defaults.baseURL = ""
			const app = new Vue({
				el: "#app",
				data: {
					activeName:"法师",
					groupUserList: [

					],
					userList: [

					],
					jobList:["法师","死灵","野蛮人","圣教军","武僧","猎魔"]
				},
				methods: {
					// 查询所有数据
					findall() {
						axios.get("findall")
							.then(Promise => {
								this.userList = Promise.data
								this.groupUserList = this.userList.filter(a => a.jobName == "法师");
							})
					},
					//修改数据
					saveAll() {
						axios.put("saveAll", this.userList)
							.then(Promise => {
								let msg = Promise.data
								alert(msg)
							})
					},
					//修改数据
					setDefaultDamageBonus() {
						axios.put("setDefaultDamageBonus")
								.then(Promise => {
									let msg = Promise.data
									location.reload();
								})
					},
					saveUpdate(o){
						let uList=[];
						uList.push(o);
						axios.put("saveAll",uList)
								.then(Promise => {
									let msg = Promise.data

								})

					},
					tabClick(tab, event) {
						if(tab.name=="请假人员" ||tab.name=="失联人员")
						{
							this.groupUserList = this.userList.filter(a => a.status == tab.name.replace("人员",""));
						}else {
							this.groupUserList = this.userList.filter(a => a.jobName == tab.name);
						}
					}
				},
				created() {
					this.findall()
				}
			})
		</script>
	</body>
</html>
